<!--
 * @Description: 预警数据分析
 * @Author: huacong
 * @Date: 2020-09-27 15:05:23
 * @LastEditTime: 2020-10-12 15:18:41
 * @LastEditors: huacong
-->
<template lang="pug">
  screen-wrapper(title="预警数据分析")
    el-row.h(:gutter="12")
      el-col.h(:span="18")
        .leftBox.h
          el-row(:gutter="12" style="flex: 1")
            //- 地图
            el-col.h(:span="15")
              #mapBox
            //- 预警情况总览
            el-col.overviewWrapper(:span="9")
              h2
                img(src="~@/assets/dp_title2.png")
              .overviewBox(v-for="(item, key) in overviewData" :key="key")
                .imgBox
                  img(:src="item.img")
                .info
                  h3 {{item.title}}
                  .btn {{item.num | numFilter}}
          el-row
            //- 医疗机构排名
            el-col(:span="12")
              .partBox.rankWrapper(style="margin-right: 6px")
                h2 医疗机构排名
                .rankBox(v-for="(item, index) in rank_org" :key="index")
                  .header
                    span NO.{{index + 1}}
                    | {{item.title}}
                  .bar(:style="{width: barwFn(item.num, rank_org)}")
                    small {{item.num | numFilter}}
                empty(v-if="rank_org.length < 1")
            //- 药店预警排名
            el-col(:span="12")
              .partBox.rankWrapper(style="margin-left: 6px")
                h2 药店预警排名
                .rankBox(v-for="(item, index) in rank_medicine" :key="index")
                  .header
                    span NO.{{index + 1}}
                    | {{item.title}}
                  .bar(:style="{width: barwFn(item.num, rank_medicine)}")
                    small {{item.num}}
                empty(v-if="rank_medicine.length < 1")
      //- 预警人员
      el-col.personWrapper.h(:span="6")
        .partBox.h
          el-scrollbar.h(
            :native='false'
            style="height: 812px"
            class="scrollWrapper"
            wrap-class="scroll__wrap"
            view-class="scroll__view"
            :noresize='false'
            )
            .personBox(v-for="item in persons" :key="item.id")
              .imgBox
                a-image(
                  :url="info.photo"
                  height="132px"
                  width="100%"
                )
              .info
                p
                  span 姓名：
                  br
                  span 预警场景：
                p.pa(style="bottom: 0")
                  span 预警时间：2020-9-21  20：32
                  br
                  span xxx医院xxx科室
            empty.pa(v-if="persons.length < 1" style="top: 50%; left: 50%; transform: translate(-50%,-50%)")
</template>
<script>
import echarts from '@/utils/initEcharts'
import { echartsMixin } from '@/core/mixins'
import ScreenWrapper from '../ScreenWrapper'
import { AImage, Empty } from '@/components'
import _ from 'lodash'
import ICON1 from '@/assets/warn1.png'
import ICON2 from '@/assets/warn2.png'
import axios from 'axios'

const coverseMapData = (data) => {
  if (Array.isArray(data)) {
    var res = []
    for (var i = 0; i < data.length; i++) {
      const item = data[i]
      res.push({
        name: item.name,
        value: [item.long, item.lat, item.value]
      })
    }
    console.log(res)
    return res
  } else {
    return { name: data.name, value: [data.long, data.lat, data.value] }
  }
}

export default {
  name: 'RealtimeDataBoard',
  components: {
    ScreenWrapper,
    AImage,
    Empty
  },
  mixins: [echartsMixin],
  computed: {
  },
  data () {
    return {
      echartsId: 'dataCharts',
      overviewData: {
        total: {
          title: '累计预警总数',
          num: 1000,
          img: ICON1
        },
        today: {
          title: '今日预警数',
          num: 1000,
          img: ICON2
        },
        month: {
          title: '本月预警总数',
          num: 1000,
          img: ICON1
        }
      },
      rank_org: [
        {
          title: '医院1',
          num: 15235
        },
        {
          title: '医院2',
          num: 1535
        },
        {
          title: '医院3',
          num: 1523
        },
        {
          title: '医院4',
          num: 152
        }
      ],
      rank_medicine: [],
      persons: []
    }
  },
  mounted () {
    axios.get(process.env.BASE_URL + 'static/map.json').then(res => {
      this.getMap(res.data, [{
        area: 'C市',
        name: '打黑',
        value: 12,
        long: 112.950923,
        lat: 27.888942
      }, {
        area: 'D市',
        name: '除恶',
        value: 1223,
        long: 112.68559,
        lat: 27.832386
      }, {
        area: 'D市',
        name: '除恶2',
        value: 125,
        long: 112.68559,
        lat: 27.862386
      }])
    })
  },
  methods: {
    // 地图
    getMap (mapJson, mapData) {
      const series = []
      // 分区生成地图标注点
      mapData.map(item => {
        const serie = series.find(x => x.name === item.area)
        if (serie) {
          serie.data.push(coverseMapData(item))
        } else {
          const serieTemp = {
            name: item.area,
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: [coverseMapData(item)],
            encode: {
              value: 2
            },
            symbolSize: function (val) {
              return val[2] / 10 > 24 ? 24 : (val[2] / 20) < 12 ? 12 : (val[2] / 20)
            },
            showEffectOn: 'emphasis',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
              show: false
            },
            itemStyle: {
              color: params => {
                const val = params.value[2]
                return val / 10 > 24 ? '#ee2e3d' : '#f96f35'
              },
              shadowBlur: 10,
              shadowColor: 'rgba(255,172,181, 0.7)'
            },
            zlevel: 1
          }
          series.push(serieTemp)
        }
      })
      const mapOption = {
        grid: {
          top: 20,
          bottom: 20,
          right: 10,
          left: 10
        },
        tooltip: {
          trigger: 'item',
          showDelay: 0,
          transitionDuration: 0.2,
          backgroundColor: 'rgba(7,43,84,0.9)',
          borderColor: '#009aff',
          borderWidth: 1,
          padding: 0,
          formatter: function (params) {
            let str = ''
            var value = params.value[2]
            str += '<h2 style="background:#009aff; height: 30px;line-height:30px;color:#fff;text-align: center;font-size:16px">' + params.seriesName + '</h2>'
            str += '<div style="margin: 10px 20px">'
            str += '<p style="line-height: 1.5"><span style="color: #fff">' + params.name + '：</span>'
            str += '<span class=""ml5 style="color: #04e5fe">' + value + '<small style="font-size: 75%">人</small></span></p>'
            return str + '</div>'
          }
        },
        geo: {
          show: true,
          map: mapJson.properties.name,
          roam: false,
          label: {
            show: true,
            color: '#05fbfe',
            fontSize: 16
          },
          itemStyle: { // 定义样式
            normal: { // 普通状态下的样式
              areaColor: 'rgba(26,63,130,0.1)',
              borderColor: '#00f0fa',
              borderWidth: 1,
              shadowColor: 'rgba(96,227,255,1)',
              shadowBlur: 20
            },
            emphasis: { // 高亮状态下的样式
              areaColor: 'rgba(105,230,196,0.2)'
            }
          },
          emphasis: { // 高亮状态下的样式
            label: {
              show: true,
              color: '09dcde'
            }
          }
        },
        series: series
      }
      echarts.registerMap(mapJson.properties.name, mapJson)
      this.$_chartMixin_init(mapOption)
    },
    barwFn (val, list) {
      const nums = list.map(x => { return x.num })
      const max = _.max(nums)
      return (val / max) * 100 + '%'
    }
  }
}
</script>
<style lang="scss" scoped>

.leftBox{
  display: flex;
  flex-direction: column;
}

#mapBox{
  width: 100%;
  height: 100%
}

.overviewWrapper{
  padding: 48px 32px;

  h2{

    img{
      height: 48px;
    }
  }

  .overviewBox{
    border: 1px dashed #2068d1;
    background: rgba(32,104,209,0.4);
    padding: 20px 20px 20px 24px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    img{
      width: 64px;
      height: 64px;
      margin-right: 24px
    }

    .info {
      flex: 1;
      text-align: center;

      h3{
        color: #fff;
        font-size: 14px;
        text-align: center;
        margin-bottom: 5px;
      }

      .btn{
        display: inline-block;
        text-align: center;
        color: #f3db5c;
        font-size: 30px;
        font-weight: lighter;
        background: url('~@/assets/dp_btn.png') center center no-repeat;
        background-size: 100% 100%;
        height: 50px;
        line-height: 50px;
        width: 100%;
        max-width: 226px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

  }
}

.rankWrapper{
  h2{
    position: relative;
    color: #fff;
    line-height: 1;
    margin: 5px 12px 0 12px;
    padding-left: 16px;

    &::before{
      background: #1583ff;
      width: 5px;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0
    }
  }

  .rankBox{
    margin: 12px 24px;

    .header{
      color: #fff;
      margin-bottom: 10px;

      span {
        color: #00eaff;
        margin-right: 12px;
      }

    }

    .bar{
      position: relative;
      background: -webkit-linear-gradient(left, #51c5fe, #51fed0);
      height: 13px;
      min-width: 132px;

      > small{
        position: absolute;
        right: 0;
        bottom: 24px;
        font-weight: lighter;
        color: #ffe34a
      }
    }
  }
}

.personWrapper{
  padding: 12px;

  .personBox{
    background: rgba(51,107,190, 0.4);
    padding: 5px;
    padding-left: 132px;
    position: relative;
    height: 142px;
    margin-bottom: 12px;

    .imgBox {
      width: 120px;
      padding:6px;
      background: #1a3f82;
    }

    .info {
      font-size: 12px;
      color: #fff;
      position: relative;
      height: 100%;

      p {
        margin-bottom: 0;
        line-height: 1.2;
      }
    }
  }
}
</style>
